<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <!-- 避免IE使用兼容模式 -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
        <meta name="renderer" content="webkit">
        <meta name="Keywords" content="VJ 后台管理系统"/>
        <meta name="Description" content="VJ 后台管理系统"/>
        <title>后台登录</title>
        <!-- 浏览器标签图片 -->
        <link rel="shortcut icon" href="__IMG__/favicon.ico">
        <link href="__LIB__/B-JUI/themes/css/bootstrap.css" rel="stylesheet">
        <link href="__LIB__/B-JUI/themes/css/FA/css/font-awesome.min.css" rel="stylesheet">
        <style type="text/css">
            html, body {
                height: 100%;
            }

            .box {
                background: url(__IMG__/bg.jpg) no-repeat center center;
                background-size: cover;

                margin: 0 auto;
                position: relative;
                width: 100%;
                height: 100%;
            }

            .login-box {
                width: 100%;
                max-width: 500px;
                height: 425px;
                position: absolute;
                top: 50%;

                margin-top: -200px;
                /*设置负值，为要定位子盒子的一半高度*/

            }

            @media screen and (min-width: 500px) {
                .login-box {
                    left: 50%;
                    /*设置负值，为要定位子盒子的一半宽度*/
                    margin-left: -250px;
                }
            }

            .form {
                width: 100%;
                max-width: 500px;
                height: 320px;
                margin: 2px auto 0px auto;
            }

            .login-content {
                border-bottom-left-radius: 8px;
                border-bottom-right-radius: 8px;
                height: 315px;
                width: 100%;
                max-width: 500px;
                background-color: rgba(255, 250, 2550, .6);
                float: left;
            }

            .input-group {
                margin: 30px 0 0 0 !important;
            }

            .form-control,
            .input-group {
                height: 40px;
            }

            .form-actions {
                margin-top: 30px;
            }

            .form-group {
                margin-bottom: 0px !important;
            }

            .login-title {
                border-top-left-radius: 8px;
                border-top-right-radius: 8px;
                padding: 20px 10px;
                background-color: rgba(0, 0, 0, .6);
            }

            .login-title h1 {
                margin-top: 10px !important;
            }

            .login-title small {
                color: #fff;
            }

            .link p {
                line-height: 20px;
                margin-top: 30px;
            }

            .btn-sm {
                padding: 8px 24px !important;
                font-size: 16px !important;
            }

            .flag {
                position: absolute;
                top: 10px;
                right: 10px;
                color: #fff;
                font-weight: bold;
                font: 14px/normal "microsoft yahei", "Times New Roman", "宋体", Times, serif;
            }

            .vaptcha-init-main {
                display: table;
                width: 100%;
                height: 100%
                background-color: #EEEEEE;
            }
            .vaptcha-init-loading {
                display: table-cell;
                vertical-align: middle;
                text-align: center
            }
            .vaptcha-init-loading>a {
                display: inline-block;
                width: 18px;
                height: 18px;
            }
            .vaptcha-init-loading>a img {
                vertical-align: middle
            }
            .vaptcha-init-loading .vaptcha-text {
                font-family: sans-serif;
                font-size: 12px;
                color: #CCCCCC;
                vertical-align: middle
            }
            #vaptcha {
                margin-top: 30px;
            }

            .form-control, .input-group {
                height: 46px;
            }

            .input-group .form-control {
                z-index: 0;
            }
        </style>
    </head>
    <body>
        <script src="__LIB__/B-JUI/plugins/vj-plugins/vj-loading.min.js"></script>
        <div class="box">
            <div class="login-box">
                <div class="login-title text-center">
                    <span class="flag"><i class="fa fa-user"></i> 用户登陆</span>
                    <h1>
                        <small><i class="fa fa-leaf"></i> VJ 后台管理系统</small>
                    </h1>
                </div>
                <div class="login-content ">
                    <div class="form">
                        <form id="loginForm" class="form-horizontal" action="{:url(M_C . 'doLogin')}" method="post">
                            <div class="form-group">
                                <div class="col-xs-10 col-xs-offset-1">
                                    <div class="input-group">
                                        <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
                                        <input type="text" id="username" name="username" class="form-control" placeholder="用户名">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-xs-10 col-xs-offset-1">
                                    <div class="input-group">
                                        <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
                                        <input type="password" id="password" name="password" class="form-control"
                                               placeholder="密码">
                                    </div>
                                </div>
                            </div>
                            <!--<div class="form-group">
                                <div class="col-xs-10 col-xs-offset-1">
                                    <div class="input-group">
                                        <span class="input-group-addon">
                                            <span class="glyphicon glyphicon-check"></span>
                                        </span>
                                        <input type="text" id="verify_code" name="verify_code" class="form-control"
                                               placeholder="验证码">
                                        <span class="input-group-addon" style="padding: 0;">
                                            {:captcha_img('vj')}
                                        </span>
                                        <span class="input-group-addon refresh">
                                            <span class="glyphicon glyphicon-refresh"></span>
                                        </span>
                                    </div>
                                </div>
                            </div>-->
                            <div class="form-group">
                                <div class="col-xs-10 col-xs-offset-1">
                                    <div id="vaptcha" style="width: 411px; height: 46px;">
                                        <div class="vaptcha-init-main">
                                            <div class="vaptcha-init-loading">
                                                <a href="javascript: void 0;" target="_blank"><img src="https://cdn.vaptcha.com/vaptcha-loading.gif"/></a>
                                                <span class="vaptcha-text">VAPTCHA启动中...</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group form-actions">
                                <div class="col-xs-12 text-center">
                                    <button type="button" id="login" class="btn btn-sm btn-success">
                                        <span class="fa fa-check-circle"></span> 登录
                                    </button>
                                    <button type="button" id="reset" class="btn btn-sm btn-danger">
                                        <span class="fa fa-close"></span> 重置
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="errModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog modal-sm" role="document">
                <div class="modal-content">
                    <div class="modal-body">
                        <span class="text-danger"><i class="fa fa-warning"></i> #msg#</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="sucModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog modal-sm" role="document">
                <div class="modal-content">
                    <div class="modal-body">
                    </div>
                </div>
            </div>
        </div>

        <!-- 引入jQuery -->
        <script src="__LIB__/B-JUI/js/jquery-1.11.3.min.js"></script>
        <script src="__LIB__/B-JUI/js/jquery.cookie.js"></script>
        <script src="__LIB__/B-JUI/plugins/bootstrap.min.js"></script>
        <script src="https://cdn.vaptcha.com/v.js"></script>
        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
        <script src="__LIB__/B-JUI/other/html5shiv.min.js"></script>
        <script src="__LIB__/B-JUI/other/respond.min.js"></script>
        <![endif]-->
        <script type="text/javascript">
            if (navigator.appName == "Microsoft Internet Explorer" &&
                (navigator.appVersion.split(";")[1].replace(/[ ]/g, "") == "MSIE6.0" ||
                    navigator.appVersion.split(";")[1].replace(/[ ]/g, "") == "MSIE7.0" ||
                    navigator.appVersion.split(";")[1].replace(/[ ]/g, "") == "MSIE8.0")
            ) {
                alert("您的浏览器版本过低，请使用360安全浏览器的极速模式或IE9.0以上版本的浏览器");
            }
        </script>
        <script>
            var _hmt = _hmt || [];
            (function () {
                var hm = document.createElement("script");
                hm.src = "https://hm.baidu.com/hm.js?9bbb7536a0474a4ad060a6fdc8a678b5";
                var s = document.getElementsByTagName("script")[0];
                s.parentNode.insertBefore(hm, s);
            })();
        </script>
        <script type="text/javascript">
            (function (win) {
                var url = win.verifiedUrl || '/vaptcha/01';
                var outage = win.outageUrl || '/downtime';
                /*配置*/
                var config = {
                    vid: '',
                    challenge: '',
                    outage: outage,
                    effect: 'float',
                    style: 'dark',
                    type: 'click',
                    container: '',
                    lang: 'zh_CN',
                    success: null,
                    fail: null
                };
                /*ajax异步请求验证码流水号*/
                $.ajax({
                    url: url,
                    type: 'get',
                    dataType: 'json',
                    async: false,
                    success: function (resp) {
                        if (resp.code === 1) {
                            /*设置验证流水号和vid*/
                            config.challenge = resp.data.challenge;
                            config.vid = resp.data.vid;
                            win.vaptchaValidate = function (container, success, fail) {
                                var arr = ['container', 'success', 'fail'];
                                [].slice.call(arguments, 0).forEach(function (val, index) {
                                    config[arr[index]] = val;
                                });
                                /*获取验证对象*/
                                win.vaptcha(config, function (obj) {
                                    obj.init();
                                });
                            }
                        } else {
                            alert(resp.msg);
                        }
                    },
                    error: function () {
                        alert('网络错误！');
                    }
                });
            })(window);
            $(function () {
                var op = null;
                vaptchaValidate('#vaptcha', function (token, challenge) {
                    op = {
                        token: token,
                        challenge: challenge
                    };
                }, function () {
                    showMsg('验证失败！');
                });
                $('body').keyup(function (event) {
                    if (event.keyCode === 13) {
                        $("#login").trigger("click");
                        return false;
                    }
                });

                $("#login").on("click", function () {
                    if ($.trim($('#username').val()) === '' || $.trim($('#password').val()) === '') {
                        showMsg('请输入用户名或密码！');
                        return;
                    }
                    if (op) {
                        submitForm();
                    } else {
                        showMsg('请先进行验证！');
                    }
                });

                function showMsg (msg) {
                    var $el = $('#errModal .modal-body');
                    $el.html('<span class="text-success"><i class="fa fa-check-circle"></i> ' + msg + '</span>');
                    $('#errModal').modal();
                    setTimeout(function () {
                        $('#errModal').modal('hide');
                    }, 2000);
                }

                function submitForm() {
                    if (navigator.appName == "Microsoft Internet Explorer" &&
                        (navigator.appVersion.split(";")[1].replace(/[ ]/g, "") == "MSIE6.0" ||
                            navigator.appVersion.split(";")[1].replace(/[ ]/g, "") == "MSIE7.0" ||
                            navigator.appVersion.split(";")[1].replace(/[ ]/g, "") == "MSIE8.0")
                    ) {
                        alert("您的浏览器版本过低，请使用360安全浏览器的极速模式或IE9.0以上版本的浏览器");
                    } else {
                        var formData = {
                            username: $('#username').val(),
                            password: $('#password').val(),
                            token: op.token,
                            challenge: op.challenge,
                            sceneId: '01'
                        };
                        $.ajax({
                            type: 'POST',
                            url: $("#loginForm").attr('action'),
                            contentType: "application/json; charset=utf-8",
                            data: JSON.stringify(formData),
                            success: function (data) {
                                if (data.status == 1) {
                                    showMsg(data.message);
                                    setTimeout(function () {
                                        location.href = data.url;
                                    }, 1000);
                                } else {
                                    showMsg(data.message);
                                }
                            },
                            error: function () {
                                showMsg('网络错误！');
                            }
                        });
                    }
                }

                $("#reset").on("click", function () {
                    $("#username").val("");
                    $("#password").val("");
                });
            });
        </script>
    </body>
</html>